<div class="pm_modal {{this.class}}" role="dialog" style="display: block;" id="welcomeModal">
    <form
        class="modal-dialog modal-sm"
        name="welcomeModal"
        method="post"
        ng-submit="ctrl.next()"
        novalidate>
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" translate translate-context="Title">Welcome to ProtonMail</h3>
            </div>
            <div class="modal-body">
                <section class="pm_form">
                    <p class="alert alert-info">
                        <strong translate translate-context="Title">You now have an encrypted email account!</strong><br />
                        <span translate translate-context="Info">Below are optional settings you can use to customize your account. You can always find these on your Settings page.</span>
                    </p>
                    <br />
                    <div class="pm_grid">
                        <div class="col-1-3">
                            <label for="displayName" translate-context="Title" translate>Display name</label>
                        </div>
                        <div class="col-2-3">
                            <input
                                id="displayName"
                                type="text"
                                name="displayName"
                                ng-model="ctrl.displayName"
                                placeholder-translate-context="Placeholder"
                                placeholder-translate="Display name" />
                            <p class="help-block"><small translate translate-context="Info">This is the 'From' name that people will see when you email them.</small></p>
                        </div>
                    </div>
                </section>
                <section class="pm_form">
                    <hr />
                    <div class="pm_grid">
                        <div class="col-1-3">
                            <label translate-context="Label" translate>Follow us</label>
                        </div>
                        <div class="col-2-3">
                            <ul class="welcome-socialList-container">
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://twitter.com/ProtonMail"><i class="fa fa-twitter"></i></a>
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://www.facebook.com/protonmail/"><i class="fa fa-facebook"></i></a>
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://www.instagram.com/protonmail/"><i class="fa fa-instagram"></i></a>
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://www.reddit.com/r/ProtonMail/"><i class="fa fa-reddit"></i></a>
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://github.com/ProtonMail"><i class="fa fa-github"></i></a>
                            </ul>
                        </div>
                    </div>
                    <div class="pm_grid">
                        <div class="col-1-3">
                            <label translate-context="Label" translate>Download App</label>
                        </div>
                        <div class="col-2-3">
                            <ul class="welcome-socialList-container">
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://play.google.com/store/apps/details?id=ch.protonvpn.android"><i class="fa fa-android"></i></a><li>
                                <li class="welcome-socialList-item"><a class="pm_button round big" target="_blank" href="https://itunes.apple.com/app/protonmail-encrypted-email/id979659905"><i class="fa fa-apple"></i></a><li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="modal-footer">
            <button id="confirmModalBtn" type="submit" class="pm_button primary modal-footer-button" translate translate-context="Action">Finish</a>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
